<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <style>
      #marquee-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-size: 48px; /* 文字变大 */
        background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
        color: white;
        text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7); /* 阴影效果增强 */
        animation: backgroundAnimation 10s infinite, textAnimation 2s infinite; /* 增加文字动画 */
      }

      @keyframes backgroundAnimation {
        0% {
          background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
        }
        50% {
          background: linear-gradient(135deg, #fad0c4 0%, #ff9a9e 100%);
        }
        100% {
          background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
        }
      }

      @keyframes textAnimation {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.1);
          opacity: 0.8;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <div id="marquee-container">模拟面试开始了</div>
    <script type="module" src="/src/main.js"></script>
    <script>
      const texts = [
        "前端模拟面试第四弹",
        "你学废了吗",
        "js-浏览器输入url发生了什么",
        "场景-页面白屏怎么办",
        "场景-页面地图渲染三十w个点怎么保证页面不卡顿",
        "场景-列表30w数据怎么处理",
        "场景-虚拟滚动 30w 数据滚动会卡顿吗",
        "git-git怎么做回退",
        "git-git merge和git rebase",
        "场景-微前端 样式隔离",
        "场景-iframe怎么和页面进行通信",
        "算法-数组 次序打乱排列",
        "小程序-双线程 冷启动 热启动",
        "场景-权限管理",
        "场景-seo优化",
        "这些还不会?",
        "还不去学习?",
        "关注我",
        "免费模拟面试"
      ];
      let currentIndex = 0;
      const marqueeContainer = document.getElementById('marquee-container');

      function updateText() {
        marqueeContainer.style.opacity = 0; // 文字消失效果
        setTimeout(() => {
          marqueeContainer.textContent = texts[currentIndex];
          marqueeContainer.style.opacity = 1; // 文字出现效果
        }, 500); // 500ms的切换时间
        currentIndex = (currentIndex + 1) % texts.length;
      }

      setInterval(updateText, 2000); // 每2秒切换一次文字
    </script>
  </body>
</html>